<template>
    <div class="camera-stream">
        <canvas :class="_data.classname" ref="videoCanvas"></canvas>
    </div>
    <slot></slot>
</template>

<script lang="ts" setup>
import { useElLoading } from '@/hooks/useElLoading';
import { onMounted, ref, nextTick } from 'vue'

const props = withDefaults(defineProps<{
    id: string | number,
    wsUrl: string
    classname?: string
}>(), {
    id: new Date().getTime(),
})
const data = () => {
    return {
        videoCanvas: ref<HTMLCanvasElement>(),
        player: ref(),
        classname: `camera-canvas camera-stream-${props.id} ${props.classname}`,
    }
}
const _data = data();

onMounted(async () => {
    await nextTick(() => {
        _data.videoCanvas.value = document.querySelector(`.camera-stream-${props.id}`);
        getCameraVideo();
    })
})

function getCameraVideo() {
    _data.player.value = new JSMpeg.Player(props.wsUrl, {
        canvas: _data.videoCanvas.value,
        progressive: true, // 分块加载数据，允许在源文件加载未完全完成时开始播放
        throttled: true, // 在 progressive 模式下，不延迟加载未需要播放的块
        chunkSize: 1024 * 1024, // progressive 模式下每次加载的块大小，根据网络状况进行调整
        decodeFirstFrame: true, // 不解码并显示第一帧视频，可减少初始加载时间
        maxAudioLag: 0.5, // 在流式传输时，音频的最大排队长度，根据需要进行调整
        videoBufferSize: 512 * 1024, // 在流式传输时，视频解码缓冲区的大小，根据需要进行调整
        audioBufferSize: 128 * 1024, // 在流式传输时，音频解码缓冲区的大小，根据需要进行调整
    })
}
</script>
<style lang="less" scoped>
.camera-stream {
    width: 100%;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // background: black;

    .camera-canvas {
        width: 100%;
        height: 100%;
    }
}
</style>